<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <link rel="icon" type="image/png" href="../img/icon.png">
    <link rel="stylesheet" href="../css/toastr.min.css">
    <link rel="stylesheet" href="../css/all.css">
    <style>

    </style>
</head>
<body>

<div id="app" v-cloak>

    <div >
        <h3>学生列表</h3>
        <div>
            <button type="button" class="btn btn-warning" @click=" doModifyStuStatus " >修改状态</button>
            <button type="button" class="btn btn-danger" @click=" doRemoveStu " >删除</button>
        </div>
        <hr>
        <table class="table">
            <thead>
            <tr>
                <th>选择</th>
                <th>编号</th>
                <th>登录名</th>
                <th>学生姓名</th>
                <th>性别</th>
                <th>身份证</th>
                <th>手机</th>
                <th>状态</th>
                <th>注册时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(stu,index) in pageInfo.list" >
                <td>
                    <input type="checkbox" class="old-checkbox" :value=" stu " v-model="checkArr">
                </td>
                <td>{{stu.id}}</td>
                <td>{{stu.loginName}}</td>
                <td>{{stu.name}}</td>
                <td>
                    <span v-if="stu.sex == 1" >男</span>
                    <span v-else-if="stu.sex == 2" >女</span>
                    <span v-else >未知</span>
                </td>
                <td>{{stu.idCard}}</td>
                <td>{{stu.phone}}</td>
                <td>
                    <select v-model="stu.status">
                        <option value="1">正常</option>
                        <option value="2">已毕业</option>
                        <option value="3">待审核</option>
                        <option value="-1">已删除</option>
                    </select>
                </td>
                <td>{{stu.createDate}}</td>
            </tr>
            <tr v-if="pageInfo.pages == 0">
                <td colspan="10" style="color: #5d9cec;font-size: 20px;cursor: pointer" @click="doGoPage(0)" >暂无数据, 点击刷新</td>
            </tr>
            </tbody>
        </table>
        <hr>
        <div class="page-list" >
            <a @click="doGoPage(-1)" class="page-item" v-if="pageInfo.pageNum > 1" >
                <span>&lt;&lt;</span>
            </a>

            <a :class=" 'page-item' + (num == pageInfo.pageNum ? ' item-active' : '') " @click="doGoPage(num - pageInfo.pageNum)" v-for=" (num) in pageInfo.navigatepageNums " >
                <span>{{num}}</span>
            </a>

            <a @click="doGoPage(1)" class="page-item" v-if="pageInfo.pageNum < pageInfo.pages" >
                <span>&gt;&gt;</span>
            </a>
        </div>
    </div>

</div>

<script src="../js/vue.min.js" ></script>
<script src="../js/jquery-3.3.1.min.js" ></script>
<script src="../js/toastr.min.js" ></script>
<script src="../js/base.js" ></script>
<script>
    Vue.config.devtools = true; // 描述浏览器调试工具是否可用
    new Vue({
        el: "#app",
        data: {
            baseUrl: baseUrl,
            param: {},
            pageInfo: {
                pageNum: 1,
                pageSize: 10,
                pages: 0,
                list: [],
                navigatepageNums: []
            },
            checkArr: []
        },
        beforeMount() {
            this.doGoPage(0);
        },
        watch: {
            checkArr: function (newVal, oldVal) {
                if(newVal.length > 1) {
                    newVal.shift();
                }
            }
        },
        methods: {
            doGoPage(num) {
                let pageInfo = this.pageInfo;
                let newPageNum = pageInfo.pageNum + num;
                if(newPageNum != 1) {
                    if(newPageNum < 1 || newPageNum > pageInfo.pages) {
                        return;
                    }
                }
                // loadData
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/stu/findByPage",
                    data: {
                        ldl: '123',
                        pageNum: newPageNum,
                        pageSize: pageInfo.pageSize
                    },
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            this.pageInfo = data;
                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doModifyStuStatus() {
                if(this.checkArr.length < 1) {
                    toastr.warning("请选择学生");
                    return;
                }
                let stu = this.checkArr[0];
                console.log(stu);

                $.ajax({
                    type: 'post',
                    url: baseUrl + "/back/stu/modifyStatusById",
                    data: {
                        stuId: stu.id,
                        status: stu.status
                    },
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            toastr.success(msg);
                            this.doGoPage(0);
                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doRemoveStu() {
                toastr.info('尽请期待...');
            },
            doTemp() {

            }
        }
    });
</script>
</body>
</html>